<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <!-- 导入 bootstrap.min.css -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- 导入 vue.global.js -->
    <script src="{% static 'js/vue.global.js' %}"></script>
    <!-- 导入 axios.min.js -->
    <script src="{% static 'js/axios.min.js' %}"></script>
</head>
<body>
{% verbatim %} <!-- 添加此行 -->
<div id="app">
  <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">标题</th>
      <th scope="col">内容</th>
      <th scope="col">作者</th>
      <th scope="col">价格</th>
      <th scope="col">发布日期</th>
      <th scope="col">状态</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
  <!--遍历articles 文章列表数据-->
  <tr v-for="article in articles" :key="article.id">
    <th scope="row">{{ article.id}}</th>
    <td>{{ article.title }}</td>
    <td>{{ article.content }}</td>
    <td>{{ article.author }}</td>
    <td>{{ article.price }}</td>
    <td>{{ article.pub_date }}</td>
    <td>
      <span v-if="article.status == 1" class="badge bg-success">已发布</span>
      <span v-else class="badge bg-danger">草稿</span>
    </td>
    <td>
      <button type="button" class="btn btn-primary">编辑</button>
    </td>
  </tr>

  </tbody>
    {% endverbatim %} <!-- 添加此行 -->
</table>
</div>
<script>
  // 导入Vue
  const { createApp, reactive,onMounted  } = Vue;

  const app = Vue.createApp({
    setup() {
      // 定义响应式数据
      const articles = reactive([{
        id: 1,
        title: '文章标题1',
        content: '文章内容1',
        author: '作者1',
        price: 100,
        pub_date: '2022-01-01',
        status: 1
      },
      ]);

    // 定义获取文章列表的函数
    const getArticles = () => {
    axios({
      method: 'get',
      url: '/blog/article/list',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
    .then(response => {
      // 尝试不同的数据访问方式
      const data = response.data.articles || response.data;
      articles.splice(0, articles.length, ...data);
    });
  };


      //网页加载完成后调用getArticles函数
      onMounted(() => {
        getArticles();
      });

      //返回响应式数据
      return {
        articles,
      }
    }


  });
  app.mount('#app');
  </script>
</body>
</html>